import { useState, useEffect } from 'react'
import { useRequest, useEventEmitter } from 'ahooks'
import { Table } from 'antd'
import { Http } from '../../../../Common/Api'
import { FrontModalBox } from '../Modal'

export const ScienceInfoDetailsTwo = ({ data }) => {
    const { uuid, organizationName } = data.data
    const FlowCon = {
        added: 'posScienceDetails',
        initialValues: { scienceUuid: uuid },
        columns: [
            {
                title: '组织机构',
                dataIndex: 'scienceUuid',
                valueType: 'hidden',
                render: () => <div>{organizationName}</div>,
                align: 'center',
            },
            {
                title: '名称',
                dataIndex: 'tableName',
                valueType: 'input',
                align: 'center',
            },
            {
                title: '排序',
                dataIndex: 'sortId',
                valueType: 'inputNumber',
                align: 'center',
            },
            {
                title: '计划日期',
                dataIndex: 'planTime',
                valueType: 'Date',
                align: 'center',
            },
            {
                title: '完成日期',
                dataIndex: 'finishTime',
                valueType: 'Date',
                align: 'center',
            },
        ],
    }

    const [Annex, setAnnex] = useState([])
    const [Flow, setFlow] = useState([])
    const [OptionsCall, setOptionsCall] = useState()
    const { runAsync: getAnnex } = useRequest(Http, { manual: true, onSuccess: res => setAnnex(res.list) })
    const { runAsync: getFlow } = useRequest(Http, { manual: true, onSuccess: res => setFlow(res.list) })

    useEffect(() => {
        getAnnex({ url: 'getScienceAttachments', data: { scienceUuid: uuid } })
        getFlow({ url: 'getScienceDetails', data: { scienceUuid: uuid } })
    }, [getAnnex, getFlow, uuid])

    const reloadEvent = useEventEmitter()
    reloadEvent.useSubscription(val => {
        getAnnex({ url: 'getScienceAttachments', data: { scienceUuid: uuid } })
        getFlow({ url: 'getScienceDetails', data: { scienceUuid: uuid } })
    })

    const onOpenAnnex = url => setOptionsCall({ type: 'Annex', data: { title: '查看附件', url } })

    return (
        <div className="SciencesDetails">
            <div className="Details">
                <div className="Annex">
                    <div className="Title">
                        <div style={{ color: 'white' }}>附件详情</div>
                    </div>
                    <div className="Item">
                        {Annex.map(({ uuid, fileUrl, originalName }) => (
                            <div className="Annexitem" key={uuid}>
                                <div onClick={() => onOpenAnnex(fileUrl)} style={{ color: 'white' }}>
                                    {originalName}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
                <div className="Flow ">
                    <div className="Title">
                        <div style={{ color: 'white' }}>流程详情</div>
                    </div>
                    <div className="Item">
                        <Table columns={FlowCon.columns} dataSource={Flow} rowKey="uuid" scroll={{ y: 400 }} />
                    </div>
                </div>
            </div>
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}
